<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
          div{
              width: 100px;
              height: 100px;
              border: 1px solid blue;
              /*animation：定义动画的属性（简写的属性）*/
              animation: wobble 3s linear infinite;
          }
          /*
            @keyframes   定义动画的关键帧
            from（0%）-----动画开始的起始帧
            百分比------定义中间的动画效果
            to（100%）-------动画结束 结束帧


            0%-----20%-----40%-----60%----80%---100%

           @keyframes  动画名称（动画名称自定义）

          */
        @-webkit-keyframes wobble {
            0% {
                margin-left: 100px;
                background: green;
            }
            40% {
                margin-left: 150px;
                background: orange;
            }
            60% {
                margin-left: 75px;
                background: blue;
            }
            100% {
                margin-left: 100px;
                background: red;
            }
        }

    </style>
</head>
<body>
       <div>这是一个盒子</div>
</body>
</html>